<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: panbo
  Date: 2017/7/26
  Time: 15:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page isELIgnored="false" %>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线文档管理系统</title>
</head>
<!--<style>-->
<!--html,body{-->
<!--width: 100%;-->
<!--height: 100%;-->
<!--}-->
<!--</style>-->
<script type="text/javascript">
    function numChange() {
        var obj = document.getElementById("select1");
        var num = obj.options[obj.selectedIndex].value;
        if(num == 3){
            window.location.href="/docManagement/gotoer/exit";
        }
    }
</script>
<body>
<div style="width: 100%;height: 25px;background-color: #27a1ff">
    <form>
        <table >
            <tr>
                <td align="left">
                    <button onclick="javascrtpt:window.location.href='/docManagement/gotoer/file';return false" style="border:0;background-color: transparent;color: white;font-family: '微软雅黑 Light'">文档管理</button>
                    <button onclick= "javascript:window.location.href='/docManagement/gotoer/sys/${username}';return false;" style="border:0;background-color:#1f6bf3;color: white;font-family: '微软雅黑 Light'">系统管理</button>
                    &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp; &emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                    <select onchange="numChange();return false"id="select1" style="align:right;background-color: transparent;border: 0;">
                        <option value="1"><%--<%= session.getAttribute("username").toString()%>--%>
                            <%--${user.username}--%>
                            <%=session.getAttribute("username").toString()%></option>
                        <option value="2">修改密码</option>
                        <option value="3">注销</option>
                    </select>
                </td>
            </tr>
        </table>
    </form>
</div>
<div>
    <div style="background-color: white;width:15%;height:1000px;float: left">
        <form>
            <table style="width: 100%">
                <tr><h3 style="font-family:'微软雅黑 Light';color: #2356ff">文档管理系统</h3></tr>
                <tr style="height: 35px"></tr>
                <tr><td style="font-family:'微软雅黑 Light';color: #3dbcff">用户及权限管理</td></tr>
                <tr style="height: 15px"></tr>
                <tr ><td style="font-size: small">&emsp;<button onclick="window.location.href='/docManagement/gotoer/usermag';return false" style="background-color: transparent;border: 0;">用户管理</button></td></tr>
                <tr style="height: 10px"></tr>
                <tr><td style="font-size: small">&emsp;<button style="background-color: transparent;border: 0;">角色管理</button></td></tr>
                <tr style="height: 15px"></tr>
                <tr><td style="font-family:'微软雅黑 Light';color: #3dbcff">系统配置</td></tr>
                <tr style="height: 15px"></tr>
                <tr ><td style="font-size: small">&emsp;<button style="background-color: transparent;border: 0;">安全配置</button></td></tr>
                <tr style="height: 15px"></tr>
                <tr><td style="font-family:'微软雅黑 Light';color: #3dbcff">日志管理</td></tr>
                <tr style="height: 15px"></tr>
                <tr ><td style="font-size: small">&emsp;<button style="background-color:#4680fe;border: 0;">操作日志管理</button></td></tr>
            </table>
        </form>
    </div>

    <div style="background-color: #ebf7d5;width:85%;height: 1000px;float: right">
        <div>
            <p style="font-family:'微软雅黑 Light'">系统管理>日志管理>操作日志管理</p>
            <p>
                <!--<input type=text style="width: 300px">-->
                <!--<input id="btnSubmit" type="button" value="搜索" title="search" />-->
                <input id="inputSearch" results="s" type="search" title="请输入关键字"style="width: 500px ">
                <button style="border: 0;background-color: #ffe211;color: white" >搜索</button>
                <button onclick="window.location.href='/docManagement/log/deleteall';return false"; style="border: 0;background-color: #ffe211;color: white">删除全部</button>
            </p>
        </div>
        <div style="display: none"> <span id="spanFirstt">第一页</span> <span id="spanPret">上一页</span> <span id="spanNextt">下一页</span> <span id="spanLastt">最后一页</span> 第<span id="spanPageNumt"></span>页/共<span id="spanTotalPaget"></span>页
        </div>
        <table  border="0" style="background-color: #d1f8f5;font-family: 微软雅黑">
                <tr style="background-color: #c8c8c8;width: 100%">
                    <td><label><input type="checkbox" id="check" ></label></td>
                    <%--<td style="text-align:center;color: white;width: 150px">日志id</td>--%>
                    <td style="text-align:center;color: white;width: 150px">用户id</td>
                    <td style="text-align:center;color: white;width: 350px">操作内容</td>
                    <td style="text-align:center;color: white;width: 300px">操作时间</td>
                </tr>
                <tbody id="tablelsw">
            <%@ page isELIgnored="false" %>
            <c:if test="${!empty logList}">
            <c:forEach var="log" items="${logList}">
            <tr>
                <td><label><input type="checkbox"></label></td>
                <%--<td style="text-align:center;color: black;width: 150px">${log.logId}</td>--%>
                <td style="text-align:center;color: black;width: 150px">${log.userId}</td>
                <td style="text-align:center;color: black;width: 350px">${log.operations}</td>
                <td style="text-align:center;color: black;width: 300px">${log.time}</td>
            </tr>
                </c:forEach>
            </c:if>
                </tbody>
            </table>
            <span id="spanFirst">第一页</span>
            <span id="spanPre">上一页</span>
            <span id="spanNext">下一页</span>
            <span id="spanLast">最后一页</span>
            第<span id="spanPageNum"></span>页/共<span id="spanTotalPage"></span>页
    </div>
</div>
</body>
</html>
<script>
    // JavaScript Document By lishewen
    var theTable = document.getElementById("tablelsw");
    var totalPage = document.getElementById("spanTotalPage");
    var pageNum = document.getElementById("spanPageNum");

    var spanPre = document.getElementById("spanPre");
    var spanNext = document.getElementById("spanNext");
    var spanFirst = document.getElementById("spanFirst");
    var spanLast = document.getElementById("spanLast");

    var totalPaget = document.getElementById("spanTotalPaget");
    var pageNumt = document.getElementById("spanPageNumt");

    var spanPret = document.getElementById("spanPret");
    var spanNextt = document.getElementById("spanNextt");
    var spanFirstt = document.getElementById("spanFirstt");
    var spanLastt = document.getElementById("spanLastt");

    var numberRowsInTable = theTable.rows.length;
    var pageSize = 8;
    var page = 1;

    //下一页
    function next(){

        hideTable();

        currentRow = pageSize * page;
        maxRow = currentRow + pageSize;
        if ( maxRow > numberRowsInTable ) maxRow = numberRowsInTable;
        for ( var i = currentRow; i< maxRow; i++ ){
            theTable.rows[i].style.display = '';
        }
        page++;

        if ( maxRow == numberRowsInTable ) { nextText(); lastText(); }
        showPage();
        preLink();
        firstLink();
    }

    //上一页
    function pre(){

        hideTable();

        page--;

        currentRow = pageSize * page;
        maxRow = currentRow - pageSize;
        if ( currentRow > numberRowsInTable ) currentRow = numberRowsInTable;
        for ( var i = maxRow; i< currentRow; i++ ){
            theTable.rows[i].style.display = '';
        }


        if ( maxRow == 0 ){ preText(); firstText(); }
        showPage();
        nextLink();
        lastLink();
    }

    //第一页
    function first(){
        hideTable();
        page = 1;
        for ( var i = 0; i<pageSize; i++ ){
            theTable.rows[i].style.display = '';
        }
        showPage();

        preText();
        nextLink();
        lastLink();
    }

    //最后一页
    function last(){
        hideTable();
        page = pageCount();
        currentRow = pageSize * (page - 1);
        for ( var i = currentRow; i<numberRowsInTable; i++ ){
            theTable.rows[i].style.display = '';
        }
        showPage();

        preLink();
        nextText();
        firstLink();
    }

    function hideTable(){
        for ( var i = 0; i<numberRowsInTable; i++ ){
            theTable.rows[i].style.display = 'none';
        }
    }

    function showPage(){
        pageNum.innerHTML = page;
        pageNumt.innerHTML = page;
    }

    //总共页数
    function pageCount(){
        var count = 0;
        if ( numberRowsInTable%pageSize != 0 ) count = 1;
        return parseInt(numberRowsInTable/pageSize) + count;
    }

    //显示链接
    function preLink(){ spanPre.innerHTML = "<a href='javascript:pre();'>上一页</a>"; spanPret.innerHTML = "<a href='javascript:pre();'>上一页</a>";}
    function preText(){ spanPre.innerHTML = "上一页"; spanPret.innerHTML = "上一页"; }

    function nextLink(){ spanNext.innerHTML = "<a href='javascript:next();'>下一页</a>"; spanNextt.innerHTML = "<a href='javascript:next();'>下一页</a>";}
    function nextText(){ spanNext.innerHTML = "下一页"; spanNextt.innerHTML = "下一页";}

    function firstLink(){ spanFirst.innerHTML = "<a href='javascript:first();'>第一页</a>"; spanFirstt.innerHTML = "<a href='javascript:first();'>第一页</a>";}
    function firstText(){ spanFirst.innerHTML = "第一页"; spanFirstt.innerHTML = "第一页";}

    function lastLink(){ spanLast.innerHTML = "<a href='javascript:last();'>最后一页</a>"; spanLastt.innerHTML = "<a href='javascript:last();'>最后一页</a>";}
    function lastText(){ spanLast.innerHTML = "最后一页"; spanLastt.innerHTML = "最后一页";}

    //隐藏表格
    function hide(){
        for ( var i = pageSize; i<numberRowsInTable; i++ ){
            theTable.rows[i].style.display = 'none';
        }

        totalPage.innerHTML = pageCount();
        pageNum.innerHTML = '1';

        totalPaget.innerHTML = pageCount();
        pageNumt.innerHTML = '1';

        nextLink();
        lastLink();
    }

    hide();
</script>

